<template>
	<view>
		<z-paging ref="paging"   :default-page-size="params.pageSize" v-model="list" @query="getList">
			<template #top>
				<view class="oper-box flex item-center justify-center">
					<view v-for="(oper,i) in operMenu" :key="i" class="oper-item" @click="openPer(oper,i)">
						<uni-badge v-if="i==0" class="uni-badge-left-margin oper-item" :text="merCount" absolute="rightTop" size="small">
							<image :src="oper.icon" mode="heightFix" class="oper-icon"></image>
							<view>{{oper.title}}</view>
						</uni-badge>
						<template v-else>
							<image :src="oper.icon" mode="heightFix" class="oper-icon"></image>
							<view>{{oper.title}}</view>
						</template>
					</view>
				</view>
				<view class="search-box flex item-center">
					<image src="../../static/svg/icon-search.svg" mode="heightFix" class="icon-search"></image>
					<input type="text" placeholder="搜索商户昵称" v-model="params.merchantShortName" class="search-inp">
				</view>
				<view class="sel-asc">
					<view class="flex item-center justify-between">
						<view>商户名称</view>
						<view class="asc-item flex item-center" @click="changeOrderBy()">
							<text class="asc-text" :class="{'active':params.sortType }">总销量</text>
							<view class="flex flex-col">
								<image class="icon-up"
									:src="params.sortType == 2 ?'../static/role/sel-vector.svg':'../static/role/vector.svg'"
									mode=""></image>
								<image class="icon-down"
									:src="params.sortType == 1 ?'../static/role/sel-vector.svg':'../static/role/vector.svg'"
									mode=""></image>
							</view>
						</view>
				
					</view>
				</view>
			</template>
			
			<view v-for="agent in list" class="agent-box flex" :key="agent.id" @click.stop="openDetail(agent)">
				<image :src="agent.avatar" mode="" class="img-avatar"></image>
				<view class="agent-info flex flex-col justify-between">
					<view class="nick-name flex item-center justify-between">
						<view class=" flex item-center">
							{{agent.merchantShortName}}
							<image class="icon-list" src="@/pagesD/static/role/icon-list.svg" mode=""
								@click.prevent="delAgentById(agent)"></image>
						</view>
						<view>
							¥{{agent.totalOrderAmt}}
						</view>
					</view>
					<view class="flex item-center justify-between">
						<view class="total-settle">{{agent.mccName}}
						</view>
						<view class="nick-name">{{agent.totalOrderCount}} 单</view>
					</view>
				</view>

			</view>
		</z-paging>
		<sharePoster show="merchant" :inviteData="inviteData" ref="posterRef" @emitImg='emitImg'>
		</sharePoster>
		<infoPop ref="infoPopRef" ></infoPop>
	</view>
</template>

<script setup>
	import sharePoster from '@/pagesD/components/share-poster/share-poster.vue';
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		mathHeight,
		modelShowToast
	} from '@/utils/index.js'
	import {
		getMerchantPageApi,
		getAuditCount
	} from '../api/merchant.js'
	import {
		inviteMerchant,
		unBindMerchant
	} from '@/api/business.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import infoPop from './components/infoPop.vue'
	const userStore = useUserStore()
	let list = ref([])
	const operMenu = ref([{
			title: '商户审核',
			icon: '../static/role/icon-merchantapply.svg',
			path: '/pagesD/group-manage/group-manage'
		}, {
			title: '邀请商户',
			icon: '../static/role/icon-invite.svg',
			path: ''
		},

	])
	const params = ref({
		merchantShortName: '',
		pageNum: 1,
		pageSize: 15,
		sortType:''
	})
	let paging = ref()
	const getList = async (pageNo, pageSize) => {
		uni.showLoading()
		params.value.pageNum = pageNo
		let result = await getMerchantPageApi({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
		}
		uni.hideLoading()
	}
	const reFresh = () => {
		list.value = []
		params.value.pageNum = 1
		getList(params.value.pageNum)
	}
	watch(() => params.value.merchantShortName, (val) => {
		reFresh(1)
	})
	const changeOrderBy = (i) => {
		if (params.value.sortType == 1) {
			params.value.sortType = ''
			return
		}else{
			params.value.sortType = params.value.sortType == 2 ? 1 : 2
		}
		reFresh(1)
	}
	const inviteData = ref(null)
	const getInviteAgent = async () => {
		let result = await inviteMerchant()
		inviteData.value = result
	}
	const infoPopRef = ref()
	const openDetail = (item) => {
		infoPopRef.value.showPop(true,item.id)
	}
	const posterRef = ref()
	const shareImg = ref('')
	const merCount = ref(0)
	const emitImg = (img) => {
		shareImg.value = img
	}
	const getMerCount = async () => {
		let result = await getAuditCount()
		merCount.value = 0
		if(result){
			merCount.value = result
		}
	}
	const openPer = (item, i) => {
		if (i == 1) {
			if (!inviteData.value) {
				getInviteAgent()
			}
			posterRef.value.showPopPoster(true)
		} else {
			uni.navigateTo({
				url: '/pagesD/merchantList/merchantList',
				events: {
					reFreshPage: (data) => {
						getMerCount(1)
					}
				}
			})
		}
	}
	const delAgentById = (item) => {
		modelShowToast({
			confirmColor: '#FA4543',
			content: '确认与该商户解除关系？'
		}, () => {
			unBindMerchant({
				id: item.id
			}).then(res => {
				uni.showToast({
					title: '解绑成功',
					icon: 'none'
				})
				reFresh(1)
			}).catch(err => {
				modelShowToast({
					confirmColor: '#FA4543',
					content: err.message||'操作失败',
					showCancel:false
				})
			})
		})
	}

	onMounted(() => {
		getMerCount()
	})
</script>

<style lang="scss" scoped>
	.oper-box {
		margin: 20px;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
		border-radius: 8px;
		padding: 20px 0;

		.oper-item {
			width: 33.3%;
			font-size: 12px;
			font-weight: 400;
			line-height: 17px;
			text-align: center;

			.oper-icon {
				// width: 24px;
				height: 24px;
				margin-bottom: 6px;
			}
		}
	}

	.search-box {
		margin: 20px;
		// box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
		background-color: #ffffff;
		border-radius: 8px;
		padding: 0px 10px;
		height: 36px;

		.icon-search {
			height: 20px;
		}

		.search-inp {
			width: calc(100% - 40px);
			margin-left: 10px;
			font-size: 12px;
		}
	}

	.sel-asc {
		margin: 0 20px;
		padding: 10px 0;
		color: #999999;
		font-size: 14px;
		min-height: 40px;

		.asc-item {
			margin-right: 20px;

			.asc-text {
				margin-right: 4px;

				&.active {
					color: #FA4543;
				}
			}

		}

	}

	.icon-up {
		width: 8px;
		height: 8px;
	}

	.icon-down {
		width: 8px;
		height: 8px;
		transform: rotate(180deg)
	}

	.agent-box {
		padding: 8px 12px;
		margin: 0 20px 20px;
		background-color: #ffffff;
		border-radius: 8px;

		.agent-info {
			width: calc(100% - 60px);
			margin-left: 10px;
		}

		.img-avatar {
			width: 45px;
			height: 45px;
			border-radius: 8px;
		}

		.icon-list {
			width: 16px;
			height: 16px;
			margin-left: 4px;
		}

		.nick-name {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px;
		}

		.total-settle {
			font-size: 12px;
			font-weight: 400;
			// line-height: 17px;
			color: rgba(51, 51, 51, 0.6);
		}

		.red-price {
			color: rgba(250, 69, 67, 1);
		}

		.group-name {
			font-size: 12px;
			background-color: rgba(252, 181, 19, 1);
			padding: 0 4px;
			color: #ffffff;
			margin-left: 4px;
			border-radius: 4px;
		}
	}

	.no-page-tit {
		font-size: 12px;
		font-weight: 400;
		line-height: 40px;
		letter-spacing: 0px;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
	}

	// 邀请
	.invite-page {
		width: 343px;
		// height: 428px;
		border-radius: 12px;
		background-color: #ffffff;
		padding: 10px;

		.inv-logo {
			width: 88px;
			height: 88px;
			border-radius: 12px;
			margin-bottom: 8px;
		}

		.inv-name {
			color: rgba(51, 51, 51, 1);
			font-size: 16px;
			font-weight: 600;
			line-height: 24px;
		}

		.inv-title {
			font-size: 24px;
			font-weight: 600;
			line-height: 36px;
			margin-top: 20px;
		}

		.inv-tip {
			font-size: 14px;
			font-weight: 400;
			line-height: 21px;
			text-align: center;
			margin-top: 10px;
		}

		.app-logo {
			height: 95px;
			margin: 20px auto;
		}

		.icon-close {
			margin-bottom: 20px;
		}

		.long-tap-inv {
			// width: Hug (152px)
			height: 22px;
			padding: 0px 8px;
			border-radius: 4px;
			background: rgba(245, 245, 245, 1);
			color: rgba(51, 51, 51, 0.6);
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: 400;
			line-height: 22px;
			margin-bottom: 14px;
		}
	}
</style>